<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
		
		//HeaderMode
		sheet_init.HeaderMode = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		sheet_init.Cols = [
		       			{Header:"NO",		Type:"Seq", Align:"Right"},
		       			{Header:"상태",		Type:"Status", Align:"Center"},
		       			{Header:"삭제",		Type:"DelCheck"},
		       			{Header:"문자열",	Type:"Text", KeyField:1, Align:"Center"},
		       			{Header:"콤보",		Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
		       			{Header:"콤보에디트",	Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
		       			{Header:"팝업",		Type:"Popup", Width:100},
		       			{Header:"팝업에디트",	Type:"PopupEdit", Width:100},
		       			{Header:"자동합계",	Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
		       			{Header:"자동평균",	Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
		       			{Header:"정수",		Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
		       			{Header:"실수",		Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
		       			{Header:"날짜",		Type:"Date", Align:"Center", Format:"Ymd", Width:100},
		       			{Header:"패스워드",	Type:"Pass", Hidden:1},
		       			{Header:"체크박스",	Type:"CheckBox"},
		       			{Header:"라디오",	Type:"Radio"}
		       		]; 
		
		IBS_InitSheet(mySheet, sheet_init);

		//컬럼의 너비 조정
		mySheet.FitColWidth();
		
		doAction("search");
	});

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
				
			case "reload":		//초기화
				mySheet.RemoveAll();
				break;
				
			case "Main":      
				mySheet.SetTheme('GM', 'Main');
				break;

			case "Main2":      
				mySheet.SetTheme('GM2', 'Main2');
				break;

			case "Main3":
				mySheet.SetTheme('GM3', 'Main3');
				break;
				
			case "Round":
				mySheet.SetTheme('RM', 'RoundMain');
				break;

			case "Blue":      
				mySheet.SetTheme('BL', 'Blue');
				break;

			case "Brown":      
				mySheet.SetTheme('BN', 'Brown');
				break;

			case "Gray":      
				mySheet.SetTheme('GY', 'Gray');
				break;

			case "Green":      
				mySheet.SetTheme('GN', 'Green');
				break;

			case "Navy":      
				mySheet.SetTheme('NB', 'Navy');
				break;

			case "Orange":      
				mySheet.SetTheme('OR', 'Orange');
				break;

			case "Purple":      
				mySheet.SetTheme('PP', 'Purple');
				break;

			case "Yellow":      
				mySheet.SetTheme('YL', 'Yellow');
				break;

			case "LightBrown":      
				mySheet.SetTheme('LBN', 'LightBrown');
				break;

			case "LightGray":      
				mySheet.SetTheme('LGY', 'LightGray');
				break;

			case "LightGreen":      
				mySheet.SetTheme('LGN', 'LightGreen');
				break;

			case "LightPurple":      
				mySheet.SetTheme('LPP', 'LightPurple');
				break;

			case "LightSky":      
				mySheet.SetTheme('LS', 'LightSky');
				break;
			
			case "Rainbow":
				mySheet.SetTheme('RIB','Rainbow');
				break;
		}
	}
	
	function mySheet_OnSearchEnd() {
		
	}
</script>
<title>테마 설정 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">테마 설정 예제</div>
	<div id="desc">
		SetTheme 메서드를 이용하여 특정폴더의 image와 css 파일을 시트에 적용<br>
		IBSheet는 기본적으로 Main폴더에 테마를 가져와 사용하는데, 화면에 시트 로딩 후  SetTheme()메서드를 호출시 기존에 세팅된 css를 걷어내고, 새로운 css를 반영함으로 상당한 자원를 사용하게 된다.<br>
		시트의 색상은 ibsheet.css 파일을 참고하게 되는데, 이 파일을 열어보면 모든 css class 명이 .GM으로 시작하는 걸 확인할 수 있다. 이 이름을 다른 이름으로 교체하여야만 사용이 가능하다. (여기서는 .GM을 .DB로 변경했다고 가정하자)<br>
		끝으로 시트 초기화 구문에서 다음과 같이 테마를 적용할 수 있다.<br>
		mySheet.SetTheme("DB","DeepBlue");
	</div>

	<div id="functionArea">
		<select id="theme">
			<option value="">-Theme를 선택하세요-</option>
			<option value="Main">Default</option>
			<option value="Main2">Default2</option>
			<option value="Main3">Default3</option>
			<option value="Round">Round</option>
			<option value="Blue">Blue</option>
			<option value="Brown">Brown</option>
			<option value="Gray">Gray</option>
			<option value="Green">Green</option>
			<option value="Orange">Orange</option>
			<option value="Purple">Purple</option>
			<option value="Yellow">Yellow</option>
			<option value="LightBrown">LightBrown</option>
			<option value="LightGray">LightGray</option>
			<option value="LightGreen">LightGreen</option>
			<option value="LightPurple">LightPurple</option>
			<option value="LightSky">LightSky</option>
			<option value="Rainbow">Rainbow</option>
		</select>
		<input type="button" value="테마 적용" onclick="doAction(theme.value);">
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>